<template>
  <div class="not-found-container">
    <div class="error-code">404</div>
    <div class="message">抱歉，您访问的页面不存在！</div>
    <button class="back-btn" @click="goBack">返回上一页</button>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

function goBack() {
  router.back()
}
</script>

<style scoped>
.not-found-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  text-align: center;
  padding: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.error-code {
  font-size: 10rem;
  font-weight: 900;
  animation: pulse 2s infinite ease-in-out;
  user-select: none;
}

.message {
  font-size: 1.5rem;
  margin: 20px 0 40px;
  text-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.back-btn {
  padding: 12px 30px;
  font-size: 1.2rem;
  background-color: #fff;
  color: #764ba2;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(118,75,162,0.5);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.back-btn:hover {
  background-color: #5a3ea5;
  color: #fff;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

/* 响应式字体 */
@media (max-width: 600px) {
  .error-code {
    font-size: 6rem;
  }
  .message {
    font-size: 1.2rem;
  }
  .back-btn {
    font-size: 1rem;
    padding: 10px 20px;
  }
}
</style>
